@import "../../shared/color";

@icon-size: 96px;


.ld2-login-page {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	overflow: hidden;
	background-size: cover;
	color: @text-color;
	position: relative;
	
	.login-form {
		width: 100%;
	}
	
	.no-account {
		padding-top: 10px;
		
		a {
			cursor: pointer;
		}
	}
	
	.ld2-login-page-bg {
		position: absolute;
		top: -1px;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}
	
	.ld2-login-page-mark {
		//display: none;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		//background-color: rgba(0, 0, 0, 0.59);
	}
	
	.register-title {
		font-size: 24px;
		padding-bottom: 6px;
		color: @primary-color;
	}
	
	.txt-sms {
		width: 176px;
		margin-right: 4px;
	}
	
	.ld2-register {
		position: absolute;
		right: 30px;
		top: 20px;
	}
	
	.hidden {
		display: none !important;
	}
	
	.ant-tabs.ant-tabs-top.ant-tabs-line {
		width: 280px;
		border-bottom: none;
		
		.ant-tabs-nav .ant-tabs-tab {
			padding: 12px 16px;
		}
	}
	
	//标题
	.ld2-caption {
		margin-bottom: 12px;
		font-size: 20px;
		//font-weight: bold;
		color: #3a3a3a;
		padding-left: 10px;
	}
	
	//帐号登录
	.ld2-login-form {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
	}
	
	//头像
	.ld2-avatar {
		margin-bottom: 16px;
		width: 104px;
		height: 104px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		border: 4px solid #d6d6d6;
		
		img {
			width: @icon-size;
			height: @icon-size;
			position: relative;
		}
	}
	
	.ld2-login-box {
		background: rgba(255, 255, 255, 0.95);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
		width: 350px;
		max-height: 680px;
		min-height: 600px;
		padding-top: 18px;
		padding-bottom: 18px;
		//color: #7b7b7b;
		//border: 1px solid #e6e6e6;
		border-radius: 2px;
		transition: width .4s;
		
		&.register {
			min-height: 610px;
		}
		
		.ld2-login-message {
			width: 280px;
			margin-bottom: 4px;
			position: relative;
			top: -6px;
		}
		
		.ld2-other-login {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			color: #6a6a6a;
			font-size: 14px;
			padding-top: 10px;
			
			.icon-box {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: row;
				padding-top: 10px;
				
				.login-icon {
					margin: 4px 10px;
					width: 40px;
					height: 40px;
					border-radius: 50%;
					background-color: #c5c5c5;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24px;
					color: #ffffff;
					cursor: pointer;
					transition: background-color .4s;
					
					&.wx {
						background-color: #55a532;
					}
					
					&.qq {
						background-color: #2196F3;
					}
					
					&.wx:hover {
						background-color: #6cc738;
					}
					
					&.qq:hover {
						background-color: #59b8ff;
					}
				}
			}
			
		}
	}
	
	.login-wx-box-container {
		
		justify-content: center;
		align-items: center;
		flex-direction: column;
		display: flex;
		
		//微信登录窗口
		.login-wx-box {
			//border-radius: 3px;
			overflow: hidden;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			display: flex;
			background-color: #fff;
			padding: 50px 0px 10px;
			position: relative;
			
			button {
				margin: 10px 4px 30px;
			}
			
			.wx-loading {
				position: absolute;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				display: flex;
				width: 500px;
				height: 410px;
				top: 0;
				left: 0;
				background-color: #ffffff;
			}
			
			iframe {
				//border-radius: 3px;
				width: 500px;
				height: 410px;
				border: none;
			}
			
			.iframe-button {
				color: #ffffff;
				font-size: 20px;
				cursor: pointer;
				
				&:hover {
					color: #f2f2f2;
				}
			}
		}
	}
	
	//QQ登录
	.login-qq-box {
		overflow: hidden;
		//border-radius: 3px;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		display: flex;
		background-color: #fff;
		position: relative;
		
		
		button {
			margin: 10px 4px 30px;
		}
		
		iframe {
			//border-radius: 3px;
			width: 500px;
			height: 580px;
			border: none;
		}
		
		.qq-loading {
			position: absolute;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			display: flex;
			width: 500px;
			height: 580px;
			top: 0;
			left: 0;
			background-color: #ffffff;
		}
	}
}

.title {
	font-size: 18px;
	font-weight: bold;
}


@keyframes move_wave {
	0% {
		transform: translateX(0) translateZ(0) scaleY(1)
	}
	50% {
		transform: translateX(-25%) translateZ(0) scaleY(0.55)
	}
	100% {
		transform: translateX(-50%) translateZ(0) scaleY(1)
	}
}

.waveWrapper {
	overflow: hidden;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
}

.waveWrapperInner {
	position: absolute;
	width: 100%;
	overflow: hidden;
	height: 100%;
	bottom: -1px;
	background-image: linear-gradient(to top, #007fff 20%, #001444 80%);
}

.bgTop {
	z-index: 15;
	opacity: 0.5;
}

.bgMiddle {
	z-index: 10;
	opacity: 0.75;
}

.bgBottom {
	z-index: 5;
}

.wave {
	position: absolute;
	left: 0;
	width: 200%;
	height: 100%;
	background-repeat: repeat no-repeat;
	background-position: 0 bottom;
	transform-origin: center bottom;
}

.waveTop {
	background-size: 50% 100px;
	background-image: url("../../images/wave-top.png");
}

.waveAnimation .waveTop {
	animation: move-wave 3s;
	-webkit-animation: move-wave 3s;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}

.waveMiddle {
	background-size: 50% 120px;
	background-image: url("../../images/wave-mid.png");
}

.waveAnimation .waveMiddle {
	animation: move_wave 10s linear infinite;
}

.waveBottom {
	background-size: 50% 100px;
	background-image: url("../../images/wave-bot.png");
}

.waveAnimation .waveBottom {
	animation: move_wave 15s linear infinite;
}